<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        html,body{
            height:100%;
            width:100%;
            background: green;
        }
        .box{
            height:100px;
            width:100%;
            background: pink;
            display: flex;
            justify-content: space-around; 
        }
        img{
            /* margin-left: 100px; */
            height:100px;
            /* margin-right: 20px; */
        }
        button{
            height:20px;
            width:50px;
            line-height: 20px;
            background: blue;
            text-align: center;
            position:absolute;
            top:100px;
            left:0;
        }
        .active{
            top:0px;
        }
        
        .dis{
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
    </div>
    <button class="pp">换肤</button>
</body>
    <script>
        var box=document.querySelector('.box')
        var img=document.querySelectorAll('img')
        var pp=document.querySelector('.pp')
        
        pp.onclick = function () {
            pp.classList.toggle('active');
            box.classList.toggle('dis');
        }
        
        img.forEach(function(item,index){

            item.onclick=function(e){
                pp.classList.toggle('active');
                box.classList.toggle('dis');
                document.body.style.background=`url(${this.src})`;  
            }
        })
    </script>

</html>